<template>
    <div class="wrapper">
        <el-tree :highlight-current="true" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
</template>

<script>
	export default {
		name: 'HeaderTableView',
		data() {
			return {
				data: [
					{
						label: '安徽省检察院',
						children: [
							{label: '设备1',},
							{label: '设备2',},
							{
								label: '合肥市检察院',
								children: [
									{label: '设备1'},
									{label: '设备2'},
									{
										label: '蜀山区检察院',
										children: [
											{label: '设备1'},
											{label: '设备2'},
											{
												label: '某某某检察院',
												children: [
													{label: '设备1'},
													{label: '设备2'}
												]
											}
										]
									}]
							},
						]
					},
					{
						label: '安徽省检察院',
						children: [
							{label: '设备1',},
							{label: '设备2',},
							{
								label: '合肥市检察院',
								children: [
									{label: '设备1'},
									{label: '设备2'},
									{
										label: '蜀山区检察院',
										children: [
											{label: '设备1'},
											{label: '设备2'},
											{
												label: '某某某检察院',
												children: [
													{label: '设备1'},
													{label: '设备2'}
												]
											}
										]
									}]
							},
						]
					}
				],
				defaultProps: {
					children: 'children',
					label: 'label'
				}
			};
		},
		methods: {
			handleNodeClick(data) {
				console.log(data);
			}
		}
	}
</script>

<style scoped lang="scss">

    .wrapper {
        .el-tree {
            background: rgb(102, 107, 124);
            color: white;

            ::v-deep.el-tree-node__content:hover {
                background: #000;
            }

            ::v-deep.el-tree-node.is-current > .el-tree-node__content {
                background-color: rgb(102, 107, 124);
                color: rgb(64, 158, 255);
            }
        }
    }
</style>
